<script setup lang="ts">
import { useIntersectionObserver, useIntervalFn } from '@peng_kai/kit/libs/vueuse';
import type { StyleValue } from 'vue';

const props = withDefaults(defineProps<{
  offset?: number | string;
}>(), {
  offset: 40,
});
const emits = defineEmits<{
  intersect: [];
}>();

const $tigger = ref<HTMLElement>();
const style = computed<StyleValue>(() => ({
  position: 'relative',
  zIndex: 10,
  transform: `translate(10px, -${typeof props.offset === 'number' ? `${props.offset}px` : props.offset})`,
}));

useIntersectionObserver($tigger, ([entry]) => entry.isIntersecting && emits('intersect'));
useIntervalFn(() => ($tigger.value && ($tigger.value.hidden = !$tigger.value.hidden)), 600);
</script>

<template>
  <div ref="$tigger" :style="style" />
</template>
